<template>
  <div class="social-signup-container">
     <h3>验证</h3>
      <el-input
        ref="sms"
        v-model="SmsForm.phone"
        placeholder="手机号码"
        name="sms"
        type="text"
        tabindex="3"
        autocomplete="on"
      />
      <el-button type="primary" @click="getloginPhoneCode"
        >获取验证码</el-button
      >
      <el-input
        ref="verify"
        v-model="SmsForm.verify"
        placeholder="验证码"
        name="verify"
        type="text"
        tabindex="4"
        autocomplete="on"
      />
      <el-button class="send_sms" type="primary">登录</el-button>
  </div>
</template>


<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
import { getSms } from "@/api/user"

export default {
  name: 'SocialSignin',
  data() {
    return {
      SmsForm: {
        phone: "",
        verify: "",
      },
    }
  },
  methods: {
      getloginPhoneCode() {
      // 如果没有输入手机号，则不往下执行
      if (this.SmsForm.phone == "") {
        return false;
      }
      let phone = this.SmsForm.phone;
      console.log(12332)
      
        getSms(phone).then((res) => {
          if (res.status == 500) {
            return this.$message.error("验证码发送失败！");
          }else if(res.status==404){
            return this.$message.error("没有此手机号码");
          }else {
            // 当验证码发送成功，开始60秒倒计时
            const time = 60;
            if (!this.loginForm.timer) {
              this.loginForm.showloginCode = false;
              this.loginForm.count = time;
              this.loginForm.timer = setInterval(() => {
                if (this.loginForm.count > 0 && this.loginForm.count <= time) {
                  this.loginForm.count -= 1;
                } else {
                  this.loginForm.showloginCode = true;
                  clearInterval(this.loginForm.timer);
                  this.loginForm.timer = null;
                }
              }, 1000);
            }
          }
        });
    },
  }
}
</script>

<style lang="scss" scoped>
  .social-signup-container {
    margin: 20px 0;
    .sign-btn {
      display: inline-block;
      cursor: pointer;
    }
    .icon {
      color: #fff;
      font-size: 24px;
      margin-top: 8px;
    }
    .wx-svg-container,
    .qq-svg-container {
      display: inline-block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      padding-top: 1px;
      border-radius: 4px;
      margin-bottom: 20px;
      margin-right: 5px;
    }
    .wx-svg-container {
      background-color: #24da70;
    }
    .qq-svg-container {
      background-color: #6BA2D6;
      margin-left: 50px;
    }
  }
</style>
